<!-- #layout name=default -->
<div id="main" class="with-button">
  <div class="page-header">
    <h1 class="title">{{Kooboo.text.common.HTMLblock + ': ' + name}}</h1>
  </div>

  <div class="col-md-8 col-md-offset-2 margin-bottom-25 form-horizontal">
    <div v-for="(item,index) in contents" v-if="item.show" class="form-group">
      <label
        class="control-label col-md-2"
        :class="{ 'text-muted': item.abbr == multiLangs.default}"
        >{{ Kooboo.text.common.Content + ' (' + (item.abbr !==
        multiLangs.default ? item.abbr : Kooboo.text.site.htmlblock.readOnly )+
        ')'}}</label
      >
      <div class="col-md-10">
        <textarea
          v-if="item.abbr === multiLangs.default"
          v-model="item.value"
          v-kb-richeditor="{editorConfig: {
                    toolbar: false,
                    readonly: true,
                    content_style: '#tinymce[contenteditable=false] {word-wrap: break-word;-webkit-line-break: after-white-space;}',
                    min_height: 300,
                    max_height: 600
                }}"
          style="opacity: 0"
        ></textarea>
        <textarea
          v-else
          v-model="item.value"
          v-kb-richeditor="richeditor(item.value)"
          style="opacity: 0"
        ></textarea>
      </div>
    </div>
  </div>
  <div class="page-buttons">
    <button @click="onSubmit" class="btn green">Save</button>
    <a :href="cancelUrl()" class="btn gray">Cancel</a>
  </div>
  <kb-media-dialog :data.sync="mediaDialogData"></kb-media-dialog>
</div>

<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/kooboo-web-editor/richEditor.min.js",
      "/_Admin/Scripts/components/tinymceMonaco/plugin.min.js",
      "/_Admin/Scripts/components/kb-media-dialog.js"
    ]);
  })();
</script>
<script src="/_Admin/View/Multilingual/HtmlBlock.js"></script>
